const path = require('path');

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 引入一个去掉dist目录下license注释的插件
const TerserPlugin = require("terser-webpack-plugin");
// const { Chunk } = require('webpack');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

const { HotModuleReplacementPlugin } = require('webpack');
const loader = require('css-loader');

var getHtmlConfig = function(name){
  return {
        template : './src/view/'+name+'.html',
        filename : 'view/'+name+'.html',  // 这里和CSS、JS以及图片不一样，不能用[name]的形式来写
        inject   : true,  // 自动注入引用的网页文件
        hash     : true,  // 版本号
        chunks   : ['common',name],
        minify   : {
          collapseWhitespace : false  // 网页的格式
        }
  }
}

module.exports = {
  entry: {
    'common'        : './src/page/common/index.js',
    'index'         : './src/page/index/index.js',
    'user-login'         : './src/page/user-login/index.js',
    'catalog-main'  : './src/page/catalog-main/index.js',
    'catalog-list'  : './src/page/catalog-list/index.js'
  },  // 打包的入口
  output: {
    filename: 'js/[name].js',  // 出口，最终打包生成的文件名
    path: path.resolve(__dirname, 'dist')  // 包的路径（这里用的是绝对路径）
  },
  mode:'development',
  devServer : {
    port : 8888,
    // contentBase : path.resolve(__dirname,'dist')
    static : {
      directory: path.join(__dirname, 'dist')
    }
  },
  plugins:[
      // new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
        filename : "css/[name].css"
      }),
      new HtmlWebpackPlugin(getHtmlConfig('index')),
      new HtmlWebpackPlugin(getHtmlConfig('user-login')),
      new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),
      new HtmlWebpackPlugin(getHtmlConfig('catalog-list')),
      new HotModuleReplacementPlugin()
  ],
  // optimization  自定义一些优化打包策略
  optimization:{  
      minimize:false,
      minimizer:[new TerserPlugin({
          extractComments:false
      })],
      splitChunks:{
        cacheGroups : {
          //common是抽取来自src文件夹下的代码
        commons : {
          name : 'util',
          chunks : 'all',
          minSize : 0,   // 当抽取的公共模块大小大于该值才起作用 
          minChunks : 2  // 当块的数量大于等于minChunks时起作用

        },
        // vendor是抽取来自node_modules文件夹下的第三方代码
        // vendor:{  
        // }
        }
      }
  },
  externals : {
    'jquery' : 'window.jQuery'
  },
  module : {
    rules : [
      {
        test: /\.css$/,
        use : [
          {
            loader  : MiniCssExtractPlugin.loader,
            options : {
              publicPath : '../'
            }
          }
          ,
          {
            loader : 'css-loader',
            options : {
              esModule : false,
              importLoaders : 1
            }
          }
        ]
      }
      ,
      {
        test : /\.(png|svg|jpg|gif)$/,
        use  : {
          loader  : 'url-loader',
          options : {
              name      : 'images/[name].[ext]',
              limit     : 10,
              esModule  : false
          }
        } 
      },
      {
        test: /\.(htm|string)$/,
        use : {
          loader  : 'html-loader',
          options : {
            esModule : false,
            minimize : false
          }
        }
      }
    ]
  },
  resolve : {
    alias : {
      util          : __dirname + '/src/util',
      page          : __dirname + '/src/page',
      images        : __dirname + '/src/images',
      service       : __dirname + '/src/service',
      node_modules  : __dirname + '/node_modules'

    }
  }
};